<template>
        <div class="view-container">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="生成前端登录页面" name="first">
                                <el-col :span="6" :offset="0">
                                        <el-form-item label="选择生成语言类型">
                                                <el-select v-model="MakeLanguageType" placeholder="请选择生成的语言类型">
                                                        <el-option label="HTML" value="1" />
                                                        <el-option label="Vue3+Vite框架" value="2" />
                                                </el-select>
                                        </el-form-item>
                                </el-col>
                                <p v-if="MakeLanguageType == 2">注意这里生成的Vue3+Vite框架前端页面只是生成一个后缀为.vue的文件类型生成代码，
                                        所以需要填写更详细的生成路径。</p>
                                <p style="font-size:28px">生成路径</p>
                                <el-col :span="12" :offset="0">
                                        <el-form-item label="生成文件名字">
                                                <el-input v-model="Name" placeholder="请输入生成文件名字" />
                                        </el-form-item>
                                </el-col>
                                <el-col :span="12" :offset="0">
                                        <el-form-item label="生成路径">
                                                <el-input v-model="Src" placeholder="请输入生成路径" />
                                        </el-form-item>
                                </el-col>
                                <el-col :span="12" :offset="0">
                                        <el-form-item label="根目录">
                                                <el-input v-model="Root" placeholder="请输入生成的根目录" />
                                        </el-form-item>
                                </el-col>
                                <el-button type="success" @click="MakeBeforeCode_Login()">生成</el-button>
                        </el-tab-pane>
                        <el-tab-pane label="生成其他页面" name="second">
                                <el-col :span="6" :offset="0">
                                        <el-form-item label="选择生成语言类型">
                                                <el-select v-model="MakeLanguageType_MakeOverPage" placeholder="请选择生成的语言类型"
                                                        @change="SearchMakeLanguageType_MakeOverPage()">
                                                        <el-option v-for="item in makecodetype_list" :label="item.makecodetype_name" :value="item.makecodetype_guid" />
                                                 
                                                </el-select>
                                        </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="0">
                                        <el-form-item label="生成页面">
                                                <el-select v-model="MakePage_MakeOverPage" placeholder="请选择生成页面"
                                                        @change="getItem_MakeOverPage()">
                                                        <el-option v-for="item in MakePage_MakeOverPageList"
                                                                :label="item.uploadmakecode_name"
                                                                :value="item.uploadmakecode_name" />
                                                </el-select>
                                        </el-form-item>
                                        <el-form-item label='预览图片'>
                                                <el-upload disabled :file-list="[{ name: '', url: ReadImageSrc+Item.uploadmakecode_img }]"
                                                        action='#' :auto-upload='false' list-type='picture-card'
                                                        :http-request='false' :on-preview='handlePreviewImg' limit='1'>
                                                </el-upload>
                                                <el-dialog v-model='dialogVisibleImg'>
                                                        <img w-full style='height: 50vh;' :src='ReadImageSrc+Item.uploadmakecode_img'
                                                                alt='Preview Image' />
                                                </el-dialog>
                                        </el-form-item>
                                </el-col>
                                <el-col :span="12" :offset="0">
                                        <el-form-item label="生成路径">
                                                <el-input v-model="Src_MakeOverPage" placeholder="请输入生成路径" />
                                        </el-form-item>
                                </el-col>
                                <el-col :span="12" :offset="0">
                                        <el-form-item label="根目录">
                                                <el-input v-model="Root_MakeOverPage" placeholder="请输入生成的根目录" />
                                        </el-form-item>
                                </el-col>
                                <el-button type="success" @click="MakeBeforeCode_MakeOverPage()">生成</el-button>
                        </el-tab-pane>

                </el-tabs>

        </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { MakeBeforePage_Login, MakeBeforePage_OverPage } from '../service/MakeCode.js'
import { SearchUploadmakecode, getItemUploadmakecode } from '../service/Uploadmakecode.js'
import {getMakecodetypeList} from '/src/service/Makecodetype.js'
import {ReadImageSrc} from '/src/config.js'

const activeName = ref('first')
const MakeLanguageType = ref('1')
const Root = ref('')
const Name = ref('')
const Src = ref('')
const Src_MakeOverPage = ref('')
const Root_MakeOverPage = ref('')

const MakeLanguageType_MakeOverPage = ref('')//*默认为HTML类型
const MakePage_MakeOverPageList = ref([])
const MakePage_MakeOverPage = ref("")

const dialogVisibleImg = ref(false)

const handleClick = (tab: TabsPaneContext, event: Event) => {
        console.log(tab, event)
}

const makecodetype_list = ref([])
onMounted(() => {
        getMakecodetypeList().then((res:any)=>{
                makecodetype_list.value = res.data
                MakeLanguageType_MakeOverPage.value = res.data[0].makecodetype_guid
                const data = { uploadmakecode_type: MakeLanguageType_MakeOverPage.value }
                SearchUploadmakecode(data).then((res:any) => {
                        MakePage_MakeOverPageList.value = res.data
                })
        })
       
    
})

const Item = ref("")
function getItem_MakeOverPage() {
        const data = { type: MakeLanguageType_MakeOverPage.value, name: MakePage_MakeOverPage.value }
        getItemUploadmakecode(data).then((res) => {
                Item.value = res.data
        })
}

function SearchMakeLanguageType_MakeOverPage() {
        const data = { uploadmakecode_type: MakeLanguageType_MakeOverPage.value }
        SearchUploadmakecode(data).then((res) => {
                MakePage_MakeOverPageList.value = res.data
        })
}

//*预览图片
const handlePreviewImg = () => {
        dialogVisibleImg.value = true

}

/**
 * 生成前端登录页面
 */
function MakeBeforeCode_Login() {
        const data = { type: MakeLanguageType.value, Src: Src.value, Root: Root.value, Name: Name.value }
        MakeBeforePage_Login(data).then((res: any) => {
                console.log(res)
        })
}
/**
 * 生成前端其他页面
 */
function MakeBeforeCode_MakeOverPage() {
        const data = { Src: Src_MakeOverPage.value, Root: Root_MakeOverPage.value, Name: MakePage_MakeOverPage.value }
        MakeBeforePage_OverPage(data).then((res) => {
                console.log(res)
        })
}

</script>
<style>
.el-form-item {
        font-size: 15px;
}

.demo-tabs>.el-tabs__content {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
}
</style>